<template>
  <div class="app-container">
    实训单位查询
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入单位名称"
      prefix-icon="el-icon-search" clearable v-model="param.companyName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectCompany"></el-button>
      </el-col>
    </el-row>
    <div style="margin-left:1%;margin-right:1%">        
      <el-row :gutter="24">            
          <el-col :span="8" v-for="(item) in tabledata" :key="item.classId"  >                
          <div style="margin-top:25px">                    
            <el-card :body-style="{ padding: '0px'}" shadow="hover">
              <a  @click="detail(item)">
                <div>
                <br>
                <span style="text-align: center;display:block; font-size:22px ">{{item.companyName}}</span>
                <br>   
                </div>
                  <div>
                    <el-image  style=" min-height:250px" :src="item.pictureUrl1" :fit="fit"></el-image>            
                  </div>
                  <div>
                      <el-rate
                      v-model="item.score"
                      disabled
                      show-score
                      text-color="#ff9900">
                      </el-rate>
                  </div> 
                <div>       
                <div class="bottom clearfix">   
                   {{item.companyTypeName}}                  
                  <time class="time"><strong>创建时间:</strong>{{item.createTime}}</time>                    
                </div>                
                </div>   
              </a>             
            </el-card>                
          </div>            
          </el-col>
      </el-row>      
    </div>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      角色列表<br/><br/>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="(role, index) in roleList" :key="index" :label="role.rlName"></el-checkbox>
      </el-checkbox-group>
      <br/>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmUser">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getCompanyList } from '@/api/company'
import { deepClone } from '@/utils'
import { getRoles } from '@/api/role'
import checkPermission from '@/utils/permission' // 权限判断函数
import { searchUser } from '@/api/remote-search'
import { getEvaluationList } from '@/api/evaluation'
const defaultUser = {
  urId: 0,
  urUserName: '',
  urSalt: '',
  introduction: '',
  avatar: '',
  name: ''
  
}

export default {
  data() {
    return {
      user: Object.assign({}, defaultUser),
      userList: [],
      dialogVisible: false,
      dialogTitle: '',
      roleList: [],
      checkedList: [],
      param :{
      start: 0,
      limit: 9,
      companyName:''
      },
      pageSize: 9, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      currentDate: new Date(),
      tabledata:[
        {
          companyName:"实训单位名称",
          createtime:new Date(),
        },
      ]
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.getCompanyList()
  },
  methods: {
    checkPermission, 
    async getCompanyList() {
      let res = await getCompanyList(this.param)
      this.tabledata = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getCompanyList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getCompanyList();
    },
    selectCompany(){
      this.param.start = 0;
      this.param.limit = 12;
      this.currpage = 1;
      this.getCompanyList()
    },
    //进入实训单位详情
    detail(item){
      this.$router.push({
        path: "/companyDetail",
        query:{
          companyId:item.internshipId
        }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

</style>
